<template>
  <view class="guide-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-box">
        <text class="iconfont icon-search"></text>
        <input 
          type="text" 
          v-model="searchKey" 
          placeholder="搜索科室名称、疾病名称"
        />
      </view>
    </view>
    
    <!-- 科室分类导航 -->
    <view class="category-section">
      <view class="section-title">按科室查找</view>
      <view class="category-grid">
        <view 
          class="category-item"
          v-for="(category, index) in categories"
          :key="index"
          @tap="selectCategory(category)"
        >
          <image :src="category.icon" mode="aspectFit" class="icon" />
          <text class="name">{{ category.name }}</text>
          <text class="count">{{ category.count }}个科室</text>
        </view>
      </view>
    </view>
    
    <!-- 常见病症 -->
    <view class="disease-section">
      <view class="section-title">常见病症</view>
      <view class="disease-tags">
        <view 
          class="tag"
          v-for="(disease, index) in commonDiseases"
          :key="index"
          @tap="searchDisease(disease)"
        >
          {{ disease }}
        </view>
      </view>
    </view>
    
    <!-- 热门科室 -->
    <view class="hot-section">
      <view class="section-title">热门科室</view>
      <view class="hot-list">
        <view 
          class="hot-item"
          v-for="(dept, index) in hotDepartments"
          :key="index"
          @tap="navigateToDepartment(dept)"
        >
          <view class="rank-num" :class="{ top: index < 3 }">{{ index + 1 }}</view>
          <view class="info">
            <text class="name">{{ dept.name }}</text>
            <text class="desc">{{ dept.description }}</text>
          </view>
          <view class="stats">
            <text class="count">{{ dept.appointmentCount }}人预约</text>
            <text class="rating">{{ dept.rating }}分</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const searchKey = ref('')

// 科室分类
const categories = [
  {
    name: '内科',
    icon: '/static/department/internal.png',
    count: 8,
    departments: ['心内科', '消化内科', '呼吸内科', '神经内科']
  },
  {
    name: '外科',
    icon: '/static/department/surgery.png',
    count: 6,
    departments: ['普通外科', '骨科', '神经外科']
  },
  {
    name: '儿科',
    icon: '/static/department/pediatrics.png',
    count: 4,
    departments: ['儿科门诊', '儿童保健科']
  },
  {
    name: '妇产科',
    icon: '/static/department/gynecology.png',
    count: 3,
    departments: ['妇科', '产科', '计划生育']
  },
  {
    name: '五官科',
    icon: '/static/department/ent.png',
    count: 5,
    departments: ['耳鼻喉科', '眼科', '口腔科']
  },
  {
    name: '中医科',
    icon: '/static/department/tcm.png',
    count: 4,
    departments: ['中医内科', '针灸科', '推拿科']
  }
]

// 常见病症
const commonDiseases = [
  '感冒发烧', '高血压', '糖尿病', '颈椎病',
  '胃炎', '失眠', '头痛', '咳嗽'
]

// 热门科室
const hotDepartments = [
  {
    name: '心内科',
    description: '心血管疾病诊治',
    appointmentCount: 2580,
    rating: 4.9
  },
  {
    name: '儿科门诊',
    description: '儿童疾病诊治',
    appointmentCount: 2145,
    rating: 4.8
  },
  {
    name: '骨科',
    description: '骨关节疾病诊治',
    appointmentCount: 1980,
    rating: 4.8
  },
  {
    name: '消化内科',
    description: '消化系统疾病诊治',
    appointmentCount: 1860,
    rating: 4.7
  },
  {
    name: '妇产科',
    description: '妇科疾病诊治',
    appointmentCount: 1750,
    rating: 4.7
  }
]

// 选择科室分类
const selectCategory = (category) => {
  uni.navigateTo({
    url: `/pages/department/list?category=${category.name}`
  })
}

// 搜索疾病
const searchDisease = (disease) => {
  searchKey.value = disease
  // 执行搜索逻辑
}

// 跳转到科室详情
const navigateToDepartment = (dept) => {
  uni.navigateTo({
    url: `/pages/department/detail?name=${dept.name}`
  })
}
</script>

<style lang="scss">
.guide-container {
  min-height: 100vh;
  background: $bg-color;
  
  .search-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 20rpx 30rpx;
    box-shadow: $shadow-sm;
  }
  
  .category-section {
    background: #fff;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: $radius-lg;
    box-shadow: $shadow-sm;
    
    .category-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30rpx;
      
      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx;
        background: $bg-color;
        border-radius: $radius-md;
        transition: all 0.3s;
        
        &:active {
          transform: scale(0.95);
        }
        
        .icon {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 16rpx;
        }
        
        .name {
          font-size: 28rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
        }
        
        .count {
          font-size: 22rpx;
          color: $text-secondary;
        }
      }
    }
  }
  
  .disease-section {
    background: #fff;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: $radius-lg;
    box-shadow: $shadow-sm;
    
    .disease-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
      
      .tag {
        font-size: 26rpx;
        color: $text-regular;
        padding: 12rpx 24rpx;
        background: $bg-color;
        border-radius: $radius-xl;
        transition: all 0.3s;
        
        &:active {
          transform: scale(0.95);
          background: $primary-light;
          color: $primary-color;
        }
      }
    }
  }
  
  .hot-section {
    background: #fff;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: $radius-lg;
    box-shadow: $shadow-sm;
    
    .hot-list {
      .hot-item {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .rank-num {
          width: 40rpx;
          height: 40rpx;
          line-height: 40rpx;
          text-align: center;
          font-size: 24rpx;
          color: $text-secondary;
          margin-right: 20rpx;
          
          &.top {
            background: $primary-gradient;
            color: #fff;
            border-radius: 8rpx;
            font-weight: bold;
          }
        }
        
        .info {
          flex: 1;
          
          .name {
            font-size: 28rpx;
            color: $text-primary;
            font-weight: bold;
            margin-bottom: 6rpx;
            display: block;
          }
          
          .desc {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
        
        .stats {
          text-align: right;
          
          .count {
            font-size: 24rpx;
            color: $primary-color;
            margin-bottom: 4rpx;
            display: block;
          }
          
          .rating {
            font-size: 24rpx;
            color: $warning;
          }
        }
      }
    }
  }
  
  .section-title {
    font-size: 32rpx;
    color: $text-primary;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    
    &::before {
      content: '';
      width: 6rpx;
      height: 30rpx;
      background: $primary-color;
      border-radius: 3rpx;
      margin-right: 16rpx;
    }
  }
}
</style> 